<template>
  <view class="notification-wrapper" :class="{ 'show': visible, 'hide': !visible && wasVisible }">
    <!-- 毛玻璃背景层 -->
    <view class="blur-background"></view>
    
    <!-- 通知主容器 -->
    <view class="notification-container">
      <!-- 通知标题 -->
      <view class="notification-header">
        <text class="title-text">✨ 重要通知 ✨</text>
        <view class="title-underline"></view>
      </view>
      
      <!-- 通知内容 -->
      <scroll-view class="content-scroll" scroll-y>
        <text class="content-text" :class="{ 'glow': isGlowing }">{{ content }}</text>
      </scroll-view>
      
      <!-- 发件人信息 -->
      <view class="sender-info">
        <text class="sender-label">发件人：</text>
        <text class="sender-name">{{ sender }}</text>
      </view>
      
      <!-- 确认按钮 -->
      <view class="confirm-btn" @click="handleConfirm" :class="{ 'pulse': isPulsing }">
        <text class="btn-text">我已知晓</text>
        <view class="btn-ripple" v-if="isRippling"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    content: {
      type: String,
      default: "这里是通知内容，可以是较长的文本信息。请仔细阅读并理解通知内容。"
    },
    sender: {
      type: String,
      default: "李校长"
    }
  },
  data() {
    return {
      wasVisible: false,
      isGlowing: false,
      isPulsing: false,
      isRippling: false
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.wasVisible = true;
        this.startAnimations();
      }
    }
  },
  methods: {
    startAnimations() {
      // 文字闪烁效果
      this.isGlowing = true;
      
      // 按钮脉冲效果
      this.isPulsing = true;
      
      // 每3秒切换一次文字发光效果
      this.glowInterval = setInterval(() => {
        this.isGlowing = !this.isGlowing;
      }, 3000);
    },
    stopAnimations() {
      clearInterval(this.glowInterval);
      this.isGlowing = false;
      this.isPulsing = false;
    },
    handleConfirm() {
      // 按钮涟漪效果
      this.isRippling = true;
      setTimeout(() => {
        this.isRippling = false;
        this.stopAnimations();
        this.$emit('close');
      }, 300);
    }
  },
  beforeDestroy() {
    this.stopAnimations();
  }
}
</script>

<style lang="scss" scoped>
/* 基础样式 */
.notification-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  &.show {
    opacity: 1;
    transform: translateY(0);
  }
  
  &.hide {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* 毛玻璃背景 */
.blur-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  backdrop-filter: blur(20px);
  z-index: -1;
}

/* 通知主容器 */
.notification-container {
  width: 90%;
  height: 90%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  padding: 30px;
  overflow: hidden;
}

/* 通知标题 */
.notification-header {
  margin-bottom: 30px;
  text-align: center;
  
  .title-text {
    font-size: 48px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
  }
  
  .title-underline {
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    margin: 15px auto;
    border-radius: 2px;
  }
}

/* 通知内容 */
.content-scroll {
  flex: 1;
  margin: 20px 0;
  padding: 15px;
  
  .content-text {
    font-size: 40px;
    line-height: 1.6;
    color: #fff;
    transition: text-shadow 0.5s ease;
    
    &.glow {
      text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }
  }
}

/* 发件人信息 */
.sender-info {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  
  .sender-label {
    font-size: 36px;
    color: rgba(255, 255, 255, 0.8);
  }
  
  .sender-name {
    font-size: 36px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  }
}

/* 确认按钮 */
.confirm-btn {
  position: relative;
  margin-top: 40px;
  padding: 25px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: all 0.3s ease;
  
  .btn-text {
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
    position: relative;
    z-index: 2;
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  &:active::before {
    opacity: 1;
  }
  
  &.pulse {
    animation: pulse 2s infinite;
  }
  
  .btn-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple 0.6s ease-out;
  }
}

/* 动画效果 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(60);
    opacity: 0;
  }
}

/* 横屏优化 */
@media (orientation: landscape) {
  .notification-container {
    width: 80%;
    height: 85%;
  }
  
  .notification-header .title-text {
    font-size: 52px;
  }
  
  .content-scroll .content-text {
    font-size: 42px;
  }
  
  .sender-info {
    .sender-label, .sender-name {
      font-size: 38px;
    }
  }
  
  .confirm-btn .btn-text {
    font-size: 42px;
  }
}
</style>